@import 'wot-design-uni/components/common/abstracts/variable';

.ea-navbar-profile-fire {
  color: $-color-white !important;
  background-color: $-color-theme !important; //#007aff !important;

  .wd-navbar-capsule {
    &::before {
      border: 2rpx solid $-color-white !important;
    }
    &::after {
      background: $-color-white !important;
    }
    :deep(.wd-navbar-capsule__icon) {
      color: $-color-white !important;
    }
  }
  .wd-navbar-capsule__icon {
    color: $-color-white !important;
  }
}

.profile-header-fire {
  height: 290rpx;
  padding-bottom: 110rpx;
  background: $-color-white;
  .bg {
    width: 100%;
    height: 200rpx;
    padding-top: 100rpx;
    background-color: $-color-theme; //#007aff;
  }
  .box {
    width: 650rpx;
    height: 280rpx;
    margin: 0 auto;
    background: $-color-white;
    border-radius: 20rpx;
    box-shadow: 0 5rpx 20rpx 0rpx rgba(0, 0, 150, 0.2);
    .box-hd {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      .avatar {
        width: 160rpx;
        height: 160rpx;
        margin-top: -80rpx;
        overflow: hidden;
        background: $-color-white;
        border: 5rpx solid $-color-white;
        border-radius: 50%;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .avatar-title {
        width: 100%;
        height: unset;
        padding: unset;
        margin: unset;
        font-size: 30rpx;
        line-height: unset;
        text-align: center;
      }
    }
    .box-bd {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      .item {
        display: flex;
        flex: 1 1 auto;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        padding: 5px;
        margin: 15rpx 0;
        border-right: 1px solid #f1f1f1;
        &:last-child {
          border: none;
        }
        .icon {
          width: 60rpx;
          height: 60rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .text {
          width: 100%;
          margin-top: 10rpx;
          font-size: 28rpx;
          color: $-cell-title-color;
          text-align: center;
        }
      }
      .item:active {
        opacity: 0.6;
      }
    }
  }
}

.wot-theme-dark {
  .profile-header-fire {
    background: $-dark-background2;

    .box {
      background: $-dark-background2;
      box-shadow: 0 5rpx 20rpx 0rpx rgba(175, 175, 175, 0.2);
      .box-hd {
        .avatar {
          background: $-dark-background2;
          border: 5rpx solid $-dark-background2;
        }
      }
      .box-bd {
        .item {
          border-right: 1px solid $-color-gray-8;
          &:last-child {
            border: none;
          }
          .text {
            color: $-dark-color;
          }
        }
      }
    }
  }
}
/* 菜单区域 */
.profile-cell-icon-fire {
  box-sizing: border-box;
  display: block;
  align-items: center;
  width: 38rpx;
  height: 38rpx;
  margin-right: 20rpx;
  background-size: cover;
}
